<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.min.css" rel="stylesheet">
    <link href="./css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="./css/diy.min.css">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                </ul>
                <user-head></user-head>

            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="8"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">数据统计</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item">营销活动</li>
                        <li class="breadcrumb-item">分销</li>
                        <li class="breadcrumb-item active">数据统计</li>
                    </ol>
                </div>
            </div>
            <!--row 1 -->
            <div class="row">
                <!-- Column -->
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex p-10 no-block">
                                <div class="align-self-center display-6 m-r-20"><i class="text-success icon-Money-2"></i></div>
                                <div class="align-slef-center">
                                    <h2 class="m-b-0">
                                        <span class="text-danger fs18 fbold">￥{{info.money | formatMoney}}</span>
                                    </h2>
                                    <h6 class="text-muted m-b-0">
                                        已支出佣金
                                        <i class="mdi mdi-help-circle" title="总共支出所有用户的佣金之和"></i>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- row 4 -->
            <div class="row bgfff">
                <!-- Column -->
                <div class="card-body">
                    <div class="d-flex no-block">
                        <div>
                            <h5 class="card-title m-b-0">分销订单笔数趋势图</h5>
                        </div>
                        <div class="ml-auto">
                            <ul class="list-inline text-center font-12">
                                <li>
                                    本月分销订单笔数：
                                    <span class="cblue fbold">{{info.monthData}}</span>
                                </li>
                                <li>
                                    上月分销订单笔数：
                                    <span class="cblue fbold">{{info.lastData}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="" id="chart" style="height: 355px;width: 100%"></div>
                </div>
            </div>

        </div>

    </div>
</div>
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="./js/jquery.min.js"></script>

<script src="./js/bootstrap.min.js"></script>
<script src="./js/perfect-scrollbar.jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="./js/custom.min.js"></script>
<script src="./js/layer/layer.js"></script>
<!-- ============================================================== -->

<script src="./js/vue.js"></script>
<script src="./js/config.js"></script><script src="./js/extend.js"></script>
<script>
    $(function () {
        var vw = new Vue({
            el: '#main-wrapper',
            data: {
                rate: 0,
                myChart: null,
                info: {},
            },
            mounted() {
                this.initChart();
                this.getRoyaltyData();
            },
            methods:{
                // 统计图
                getRoyaltyData(){
                    $.cAjax('/crmPc/distribution/getRoyaltyData',{
                        data:{
                            isAgent: 1
                        }
                    }).then(res=>{
                        let payList = [];
                        let orderList = [];
                        let xAxis = [];
                        let option = this.myChart.getOption();

                        res.payOrderlist.map((val, idx)=>{
                            payList.push((val.data/100).toFixed(2));
                            orderList.push(res.allOrderAmountlist[idx].data);
                            xAxis.push(val.date);
                        });

                        option.xAxis[0].data = xAxis;
                        option.series[0].data = payList;
                        option.series[1].data = orderList;

                        this.info = res.royaltyData;
                        this.myChart.setOption(option);
                    });
                },
                initChart(){

                    this.myChart = echarts.init(document.getElementById('chart'));

                    let option = {
                        tooltip: {
                            formatter: '{a}：{c}'
                        },
                        legend: {
                            left: 'right',
                            data: ['当天付款订单金额', '当天总订单数']
                        },
                        color: ['#0099ff', '#feb76d'],
                        xAxis: {
                            data: []
                        },
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: '订单金额：{value}'
                                },
                                minInterval: 1,
                            },
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: '订单数：{value}'
                                },
                                minInterval: 1,
                            }
                        ],
                        series: [
                            {
                                name: '当天付款订单金额',
                                type: 'bar',
                                yAxisIndex: '0',
                                data: []
                            },
                            {
                                name: '当天总订单数',
                                type: 'bar',
                                yAxisIndex: '1',
                                data: []
                            },
                        ]
                    };

                    this.myChart.setOption(option);
                },
            },

        })
    })
</script>
</body>
</html>












